<template>
  <div class="container">
    <div class="header">
      <div class="title">Banner详情</div>
      <span @click="onGoBack"><i class="iconfont icon-fanhui" /> 返回</span>
    </div>
    <el-divider></el-divider>
    <div class="form-container">
      <el-form :model="form" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="form.name" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title" ize="medium"></el-input>
        </el-form-item>
        <el-form-item label="主图">
          <upload-imgs ref="uploadEle" :value="[{ display: form.img }] " :max-num="1"></upload-imgs>
        </el-form-item>
        <el-form-item label="banner描述">
          <el-input v-model="form.description" ize="medium"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Banner from "@/model/banner";
import UploadImgs from "@/components/base/upload-image/index";

export default {
  components: { UploadImgs },
  data() {
    return {
      form: {},
    };
  },
  props: {
    bannerId: {
      type: Number,
    },
  },
  async created() {
    const detail = await this.getDetail();
    this.form = detail;
  },
  methods: {
    async getDetail() {
      const detail = await Banner.getDetail(this.bannerId);
      console.log("detail", detail);
      return detail;
    },
    onGoBack() {
      this.$emit("detail-close");
    },
    async onSubmit() {
      const uploadData = await this.$refs.uploadEle.getValue();
      const data = {};
      data.description = this.form.description;
      data.title = this.form.title;
      data.name = this.form.name;
      if (uploadData.length !== 0) {
        data.img = uploadData[0].display;
      }
      const res = await Banner.updata(this.bannerId, data);
      console.log(res);
      if (res.code < window.MAX_SUCCESS_CODE) {
        this.$message.success(res.message);
        this.$emit("detail-close");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px 30px 20px 30px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: $theme;
  }
  .form-container {
    width: 600px;
  }
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: $theme;
  cursor: pointer;
}
</style>
